<template>
	<view class="">
		<view class="top">
			
		</view>
		<view class="form">
			<view class="form-title">登录</view>
			<view class="form-data">
				<uni-forms ref="form" :modelValue="formData" :rules="rules" label-width="1">
					<uni-forms-item name="mobile">
						<uni-easyinput type="text"  v-model="formData.mobile" placeholder="请输入手机号">
							<template slot="left">
								<uni-icons custom-prefix="iconfont" type="icon-shouji" size="22" color="#c0c4cc" style="padding:0px 5px;"></uni-icons>
							</template>
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="pwd">
						<uni-easyinput type="password" v-model="formData.pwd" placeholder="请输入密码" >
							<template slot="left">
								<uni-icons type="locked" size="22" color="#c0c4cc"  style="padding:0px 5px;"></uni-icons>
							</template>
						</uni-easyinput>
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="form-link">
				<view class="left" @click="regist">注册账号</view>
				<view class="right" @click="kefu">联系客服</view>
			</view>
			<view class="submit">
				<button class="btn" type="default" @click="submit" :disabled="isLoading" :loading="isLoading">登录</button>
			</view>
			<view class="form-link-url">
				<view class="left" @click="changeUrl">线路切换</view>
			</view>
		</view>
		<view class="foot">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLoading:false,
				// 表单数据
				formData: {
					mobile: '',
					pwd: ''
				},
				rules: {
					mobile: {
						rules: [
							{required: true,errorMessage: '请输入手机号'}
						]
					},
					pwd: {
						rules: [
							{required: true,errorMessage: '请输入密码'}
						]
					}
				}
			}
		},
		methods: {
			// 触发提交表单
			submit() {
				this.$refs.form.validate().then(res=>{
					this.isLoading = true
					uni.showToast({
						title: '登陆中',
						icon: 'loading',
						mask: true
					});
					let para = {
						account:this.formData.mobile,
						password:this.formData.pwd
					}
					this.$http.post('/v1/login',para,(res) => {
						if(res.code == 200){
							uni.setStorageSync('LOGINPWD',this.formData.pwd)
							uni.setStorageSync("USERNO",this.formData.mobile)
							uni.setStorageSync("Authorization",res.data.token)
							setTimeout(() => {
								uni.switchTab({
									url:'../home/home'
								})
							}, 500);
						}
						this.isLoading = false
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			regist(){
				uni.navigateTo({
					url:'regist/regist'
				})
			},
			changeUrl(){
				uni.redirectTo({
					url:'linkChoose/linkChoose'
				})
			},
			kefu(){
				uni.switchTab({
					url:'/pages/kefu/kefu'
				})
			}
		},
		onLoad() {
			const mobile = uni.getStorageSync('USERNO');
			if(mobile){
				this.formData.mobile = mobile
			}
			const pwd = uni.getStorageSync('LOGINPWD');
			if(pwd){
				this.formData.pwd = pwd
			}
		}
	}
</script>

<style lang="scss">
	.top{
		width: 750upx;
		height: 633upx;
		position: fixed;
		top: 0upx;
		background-image: url(../../static/img/login/bg1.png);
		background-size: 100% 100%;
	}
	.form{
		width: 690upx;
		margin-left: 30upx;
		margin-right: 30upx;
		height: 720upx;
		position: fixed;
		top: 312upx;
		background-color: $whiteColor;
		border-radius: 30upx;
		.form-title{
			color: #333333;
			font-size: 40upx;
			height: 100upx;
			font-weight: 500;
			margin-top: 40upx;
			margin-left: 30upx;
		}
		.form-data{
			padding-left: 30upx;
			padding-right: 30upx;
			height: 240upx;
			/deep/.uni-easyinput__content{
				height: 50px;
			}
		}
		.form-link-url{
			display: flex;
			justify-content: center;
			padding-left: 30upx;
			padding-right: 30upx;
			height: 60upx;
			line-height: 60upx;
			font-size: 28upx;
			margin-top: 20upx;
			color: $blue;
		}
		.form-link{
			display: flex;
			justify-content: space-between;
			padding-left: 30upx;
			padding-right: 30upx;
			height: 60upx;
			line-height: 60upx;
			font-size: 28upx;
			margin-top: 20upx;
			.left{
				color: $blue;
			}
			.right{
				color:$red;
			}
		}
		.submit{
			padding-left: 60upx;
			padding-right: 60upx;
			margin-top: 100upx;
			.btn{
				background-image: url(../../static/img/home/gg/btn.png);
				background-size: 100% 100%;
				color: $whiteColor;
				height: 100upx;
				line-height: 100upx;
				border-radius: 50upx;
			}
			
		}
	}
	.foot{
		width: 750upx;
		height: 375upx;
		position: fixed;
		bottom: 0upx;
		background-image: url(../../static/img/login/bg2.png);
		background-size: 100% 100%;
		z-index: -1;
	}
</style>
